<template>
	<div
		class="mr-2 mb-2 h-8 rounded-full pl-[6px] pr-4 flex items-center text-sm cursor-pointer app-bg-react"
		:class="active ? 'bg-primary' : 'bg-bg-3'">
		<base-image
			:src="data.icon"
			type="server"
			default="sports/nation-default"
			class="w-[22px] h-[22px] rounded-[11px] overflow-hidden" />
		<div class="ml-1" :class="active ? 'text-white' : 'text-t-1'">
			{{ data.shortName || data.leagueName }}
		</div>
		<div v-if="data.eventsCount" class="ml-1" :class="active ? 'text-white-500' : 'text-t-2'">
			{{ data.eventsCount }}
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage } from '@/components/base'
defineProps({
	data: {
		type: Object,
		required: true
	},
	active: {
		type: Boolean,
		default: false
	}
})
</script>
